<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" id="username" />
        <input type="radio" id="sexOne"  name="sex" value="男"/>男
        <input type="radio" id="sexTwo" checked name="sex" value="女"/>女
        <input type="text" id="age" />
        <button id="add">添加</button>
    </div>
    <br/>
    <table cellspacing="0" border="1" width="600px" >
        <thead>
            <tr>
                <td width="20%">
                    <input type="checkbox" class="selectAll" >全选
                    <input type="checkbox" class="selectOther" >反选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="user" /></td> 
                <td>王八</td>
                <td>男</td>
                <td>45</td>
            </tr>
        </tbody>

    </table>
   <script>

var allBtn = document.querySelector('.selectAll')
var outBtn = document.querySelector('.selectOther')
   
   var items = document.querySelectorAll('.user')

   allBtn.onclick = function () {
     items.forEach(function (t) {
       t.checked = allBtn.checked
     })
   }
   outBtn.onclick = function () {
     items.forEach(function (t) {
        if( t.checked == true){
                    t.checked = false;
                }else{
                    t.checked = true;
                }

       
     })

   }

   items.forEach(function (t) {

     t.onclick = handler
   })

   function handler() {

     var count = 0
     items.forEach(function (t) {
       if (t.checked === true) count++
     })
  
     allBtn.checked = count === items.length
   }
   </script>

</body>
</html>